<template>
    <div>
        <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol" :ref="componentRef">
            <slot></slot>
        </a-form>

        <LiconSelect ref="liconSelect"></LiconSelect>
    </div>
</template>
<script>

import LiconSelect from '@/components/lt/LIconSelect.vue'
import {findComponentDownward} from '@/utils/util'
export default {
    name:'ExtGridForm',
    components:{LiconSelect},
    props:{
        rows:{
            type:Number,
            default:2
        },
        cols:{
            type:Number,
            default:2
        },
        labelCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 8 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:()=>{
                return {sm: { span: 16 }}
            }
        },
        componentRef:[String,Number],
        changeEvent:{
            type:String,
            default:()=>{
                return "changeEventHandler"
            }
        },
       
    },
    data(){
        return{
            form:{},
            changeItem:{},//表单中当前改变值的组件，键值对
            that:this,
            entityClassName:''
        }
    },
   
    created(){
        this.form=this.$form.createForm(this,{onValuesChange:this.valueChange}) 
    },
    methods:{
        getForm(){
            return this.form
        },
        getEntityClassName(){
            return this.entityClassName
        },
        valueChange(props, values){
            this.changeItem = values
            this.changeEventHandler()
            let formCol = findComponentDownward(this,'ExtFormCol')
            if(formCol){
                formCol.changeItem=values
            }
            
        },
        changeEventHandler(){
            if(this.changeItem){
                let item = JSON.parse(JSON.stringify(this.changeItem))
                if(Object.getOwnPropertyNames(item).length==1){
                    this.$emit(this.changeEvent,item)
                }
            }
        },
        clickEventHandler(field){
            this.$emit("clickEventHandler",field,this.form)
        },
        showIconSelect(field){
            this.$refs['liconSelect'].show(field,this.form)
        }
      
    }
}
</script>